<template>
    <div class="textareaComponent" v-if="oItem">
      <div class="item">
          <div class="left">必填</div>
          <div class="right">
            <el-switch
              v-model="oItem.required"
              active-color="#0079fe"
              inactive-color="#dddddd"
              @change="requiredChange">
            </el-switch>
          </div>
        </div>
        <div class="item">
          <div class="left">标题</div>
          <div class="right">
            <el-input placeholder="请输入标题内容" v-model="oItem.title" :maxlength="50" @input="titleInputChange" clearable>
            </el-input>
          </div>
        </div>
        <div class="item">
          <div class="left">说明文字</div>
          <div class="right">
            <el-input placeholder="请输入说明文字" v-model="oItem.desc" :maxlength="100" @input="descInputChange" clearable>
            </el-input>
          </div>
        </div>
        <div class="item">
          <div class="left">提示语</div>
          <div class="right">
            <el-input placeholder="请输入" v-model.trim="oItem.placeholder" :maxlength="50" @input="placeholderInputChange" clearable>
            </el-input>
          </div>
        </div>
      </div>
</template>
<script>
  import Bus from "@/utils/bus";
export default {
    name: "textareaComponent",
    data() {
        return {
          pageName: "多行文本组件",
          oItem: null
        }
    },
    created() {},
    props: ["item"],
    components: {},
    mounted() {
      if (this.item) {
        this.oItem = this.item;
      }
    },
    methods: {
      //切换是否必填的状态
      requiredChange(){
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if(row.id === this.oItem.id) {
            row.required = this.oItem.required;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          required: this.oItem.required
        })
      },
      //监听输入标题的事件
      titleInputChange(){
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if(row.id === this.oItem.id) {
            row.title = this.oItem.title;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          title: this.oItem.title
        })
      },
      //监听输入文字描述的事件
      descInputChange() {
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if(row.id === this.oItem.id) {
            row.desc = this.oItem.desc;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          desc: this.oItem.desc
        })
      },
      //监听输入提示语的事件
      placeholderInputChange(){
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if(row.id === this.oItem.id) {
            row.placeholder = this.oItem.placeholder;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          placeholder: this.oItem.placeholder
        })
      }
    },
    computed: {},
    watch: {},
}
</script>
<style scoped lang="scss">
.textareaComponent{
  .item{
    display: flex; align-items: center; margin-bottom:20px;
    .left{width:30%;display: flex; justify-content: flex-end;padding-right: 10px;box-sizing: border-box;font-size: 14px;color:#888;}
  }
}
</style>